<template>
	<view class="container">


		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="告警编号" label-width="90px" name="serialNumber">
					<uni-easyinput v-model="valiFormData.serialNumber" disabled placeholder="请输入单号" />
				</uni-forms-item>
				<uni-forms-item label="告警编号" label-width="90px" name="id" v-show="false">
					<uni-easyinput v-model="valiFormData.id"  placeholder="请输入单号" />
				</uni-forms-item>
				<uni-forms-item label="公司名称" label-width="90px" name="company">
					<uni-easyinput v-model="valiFormData.company" disabled placeholder="请输入公司名称" />
				</uni-forms-item>
				<uni-forms-item label="监测点" label-width="90px" name="device">
					<uni-easyinput v-model="valiFormData.device" disabled placeholder="请输入监测点" />
				</uni-forms-item>
				<uni-forms-item label="设备类型" label-width="90px" name="deviceType">
					<uni-easyinput v-model="valiFormData.deviceType" disabled placeholder="请输入构筑物名称" />
				</uni-forms-item>

				<uni-forms-item label="超标因子" label-width="90px" name="excessFactor">
					<uni-easyinput v-model="valiFormData.excessFactor" disabled />
				</uni-forms-item>
				<uni-forms-item label="处理意见" label-width="90px" name="resolution" v-if="status =='未处置'">
					<uni-easyinput type="textarea" required v-model="valiFormData.resolution" placeholder="请输入处理意见" />
				</uni-forms-item>
				<uni-forms-item label="处理意见" label-width="90px" name="resolution" v-else>
					<uni-easyinput type="textarea" required disabled v-model="valiFormData.resolution" placeholder="请输入处理意见" />
				</uni-forms-item>


				<uni-forms-item label="原因" label-width="90px" name="reason" v-if="status =='未处置'">
					<uni-easyinput type="textarea" required v-model="valiFormData.reason" placeholder="请输入原因" />
				</uni-forms-item>
				<uni-forms-item label="原因" label-width="90px" name="reason" v-else>
					<uni-easyinput type="textarea" required disabled v-model="valiFormData.reason" placeholder="请输入原因" />
				</uni-forms-item>

				<uni-forms-item label="处置状态" label-width="90px" name="status" v-if="status =='未处置'">
					<uni-data-checkbox v-model="valiFormData.status" required :localdata="source" />
				</uni-forms-item>

				<uni-forms-item label="处理人" label-width="90px" name="personName" v-if="status =='未处置'">
					<uni-easyinput v-model="valiFormData.personName" required placeholder="请输入处理人" />
				</uni-forms-item>
				<uni-forms-item label="处理人" label-width="90px" name="personName" v-else>
					<uni-easyinput v-model="valiFormData.personName" disabled required placeholder="请输入处理人" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" label-width="90px" name="telephone" v-if="status =='未处置'">
					<uni-easyinput v-model="valiFormData.telephone" required placeholder="请输入处理人手机号码" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" label-width="90px"  name="telephone" v-else>
					<uni-easyinput v-model="valiFormData.telephone" disabled required placeholder="请输入处理人手机号码" />
				</uni-forms-item>

			</uni-forms>
			<button type="primary" v-if="status =='未处置'" @click="submit('valiForm')">提交</button>
		</view>




	</view>
</template>
<script>
	import {
		handleWarningDeal
	} from "@/api/index"
	export default {
		data() {
			return {
				status:null,

				source: [{
					text: '未处置',
					value: '未处置'
				}, {
					text: '已处置',
					value: '已处置'
				}],


				// 校验表单数据
				valiFormData: {
					"id": "",
					"status": null,
					"serialNumber": "",
					"personName": "",
					"telephone": "",
					"reason": ""

				},
				// 校验规则
				rules: {
					lastTime: {
						rules: [{
							required: true,
							errorMessage: '上次保养时间不能为空'
						}]
					}
				},



			}
		},
		onLoad: function(option) {
			this.valiFormData = JSON.parse(option.item);
			const originalDateStr = this.valiFormData.handleTime;
			// 创建一个新的Date对象
			const originalDate = new Date(originalDateStr);
			// 将日期转换为 "yyyy-MM-dd HH:mm:ss" 格式
			const year = originalDate.getFullYear();
			const month = String(originalDate.getMonth() + 1).padStart(2, '0');
			const day = String(originalDate.getDate()).padStart(2, '0');
			const hours = String(originalDate.getHours()).padStart(2, '0');
			const minutes = String(originalDate.getMinutes()).padStart(2, '0');
			const seconds = String(originalDate.getSeconds()).padStart(2, '0');

			const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			this.valiFormData.handleTime = formattedDateTime
			this.status = this.valiFormData.status
		},

		methods: {

			submit(ref) {

				console.log('success', this.$refs[ref]);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					handleWarningDeal(res).then(response => {
						console.info('ccccccc', response)
						if (response == 'success') {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
							});
							uni.navigateTo({
								url: '/pages/index/alarm'
							})
						} else {
							uni.showToast({
								title: `提交失败`,
								icon: 'fail'
							})
						}


					})

				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>